<template>
    <div class="my-tab-bar">
        <div class="tab-item" 
        v-for="(item,i) in list" 
        :key="i"
        :class="{current: i == activeIndex}"
        @click="changeBtn(i,'/'+item.componentName)"
        >
            <!-- 图标 -->
            <span class="iconfont" :class="item.iconText"></span>
            <!-- 文字 -->
            <span>{{item.text}}</span>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeIndex: 0, //高亮图标的下标
        }
    },
    props: {
        list: {
            type: Array,
            required: true,
            validator(val) {
                // val 就是传过来的数据，可以返回  true or false
                // true 代表验证通过，false 代表验证未通过
                if (val.length < 2 || val.length > 5) {
                    console.error('prop list must between 2 and 5')
                    return false
                }
                return true
            },
        },
    },
    methods:{
      changeBtn(index,path){
        // console.log(path);
        this.activeIndex = index
        this.$emit('changeCompo',path)
      }
    }
}
</script>

<style lang="less" scoped>
.my-tab-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: white;
    .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.current {
    color: #1d7bff;
}
</style>